<template>
	<view class="bg" :style="{'background-image':'url('+current_img+')','height':height+'px'}">
		<view class="page-body" v-show="isfensi === 'no'">
				<view class="distribution-posters" style="padding-top: 60rpx;">
					<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :circular="circular" :interval="interval"
						:duration="duration" @change="bindchange" previous-margin="40px" next-margin="40px">
						<block v-for="(item,index) in img_url" :key="index" class="img-list">
							<swiper-item class="aaa">
								<div class="box" ref="bill" :class="swiperIndex == index ? 'active' : 'quiet'">
									<view class="user-msg">
										<view class="user-code">
											<image class="canvas" :style="{height:hg+'px'}" :src="item.image"
												v-if="item.image" mode="widthFix"></image>
			<!-- 								<canvas class="canvas" :style="{height:hg+'px'}" :canvas-id="'myCanvas'+ index"
												v-else></canvas> -->
										</view>
									</view>
								</div>
								<!-- <image :src="item.wap_poster" class="slide-image" :class="swiperIndex == index ? 'active' : 'quiet'" mode='aspectFill' /> -->
							</swiper-item>
						</block>
					</swiper>
					<!-- <u-swiper :list="img_url" img-mode="widthFix" :height="height * 2" :autoplay="false" :effect3d="true" @change="change"></u-swiper> -->
					<!-- <image :src="baseUrl+img_url" @click="app.showImg(baseUrl+img_url)" style="width: 100%;" mode="widthFix"></image> -->
				</view>
				<view class="btn-tip">长按图片保存海报</view>
			<!-- <bottomShare :imgFile="current_img" :url="current_img" :share_url="share_url"></bottomShare> -->
		</view>
		<view class="page-body" v-show="isfensi === 'yes'">
			<view class="fensi">粉丝身份不能分享，请升级成为会员！</view>
		</view>
	</view>

</template>


<script>
	import bottomShare from '@/components/bottomShare';
	export default {
		components: {
			bottomShare
		},
		data() {
			return {
				is_wxmp:0, 
				img_url:[],
				baseUrl:this.config.baseUrl,
				share_url:'',
				isfensi:'',
				current_img:'',
				height:uni.getSystemInfoSync().windowHeight,
				indicatorDots: false,
				posterImageStatus: true,
				circular: false,
				autoplay: false,
				interval: 3000,
				duration: 500,
				swiperIndex: 0,
				spreadList: [],
				spreadData:[],
				wd: 375,
				hg: 570,
			}
		},
		onLoad(options) {
			this.getImg();
			
		},
		onShow: function() {},
		computed: {},
		async onReady() {
			this.$nextTick(() => {
				let selector = uni.createSelectorQuery().select('.aaa');
				selector.fields({
					size: true
				}, data => {
					// this.wd = data.width
					// this.hg = data.height
				}).exec();
			})
		},
		methods: {
			change(index){
				// this.current_img = this.img_url[index].image
			},
			bindchange(e) {
				let spreadList = this.spreadList;
				this.swiperIndex = e.detail.current;
				this.current_img = this.img_url[e.detail.current].image
				console.log(this.current_img)
				// this.$set(this, 'poster', spreadList[e.detail.current].poster);
			},
			getImg(){
				//#ifdef MP-WEIXIN
					this.is_wxmp = 1;
				//#endif
				this.$u.post('member/api.users/getShareImg',{isnew:1,is_wxmp:this.is_wxmp}).then(res => {
					this.img_url = [];
					this.current_img = this.baseUrl+res.data.img[0]
					res.data.img.forEach(item => {
						this.img_url.push({image:this.baseUrl+item})
					})
			
					this.share_url = res.data.share_url;
					this.isfensi = res.data.isfensi;
					if(this.isfensi == 'yes'){
						/*
						uni.showToast({ //提示
							title: '粉丝身份不能分享,请升级成为会员!',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'success',
							//显示持续时间为 2秒
							duration: 5000
						});
						*/ 
					   uni.showModal({
					           title: '温馨提示',
					           content: '粉丝身份不能分享,请升级成为会员!',
					           success: function(res) {
								   if (res.confirm) {
									   // 执行确认后的操作
								   } 
								   else {
									   // 执行取消后的操作
								   }
							   }
					   })
						
						//alert("粉丝身份不能分享，请升级成为会员！");
					}
				});
				
			}
		}
	}
</script>

<style lang="scss">
	.page-body{
		margin-top: 20rpx;
	}
	.bg{
		// background-image: url(http://www.yingtonghuixuan.cn//upload/my_code/35229_0_1.jpg?v=1710905219);
		/* filter: blur(5px); */
		// position: absolute;
		/* z-index: 1; */
		background-size: cover;
		// background-size: 110%;
		margin-top: -20rpx;
		&:before{
			content: "";
			position: absolute;
			width: 100%;
			height: 100%;
			backdrop-filter: blur(30px);
		}
	}
	.fensi{
		text-align: center;
	}
	.img-list {
		margin-right: 40px;
	}
	.canvas {
		width: 100%;
		height: 550px;
	}

	.box {
		width: 100%;
		height: 100%;
		position: relative;
		border-radius: 18rpx;
		overflow: hidden;

		.user-msg {
			position: absolute;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			.user-code {
				width: 100%;
				// height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				justify-content: space-between;

				image {
					width: 100%;
				}
			}
		}
	}
	.btn-tip{
		z-index: 9;
		position: relative;
		text-align: center;
		color: #423f3f;
		font-size: 14px;
		margin-top: 30px;
	}
	.distribution-posters swiper {
		width: 100%;
		height: 1050rpx;
		position: relative;
		margin-top: 40rpx;
	}
	
	.distribution-posters .slide-image {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		border-radius: 15rpx;
	}
	
	.distribution-posters /deep/.active {
		transform: none;
		transition: all 0.2s ease-in 0s;
	}
	
	.distribution-posters /deep/ .quiet {
		transform: scale(0.8333333);
		transition: all 0.2s ease-in 0s;
	}
	
	.distribution-posters .keep {
		font-size: 30rpx;
		color: #fff;
		width: 600rpx;
		height: 80rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 80rpx;
		margin: 38rpx auto;
	}
	
	.distribution-posters .preserve {
		color: #fff;
		text-align: center;
		margin-top: 38rpx;
	}
	
	.distribution-posters .preserve .line {
		width: 100rpx;
		height: 1px;
		background-color: #fff;
	}
	
	.distribution-posters .preserve .tip {
		margin: 0 30rpx;
	}
</style>
